<template>
  <iframe class="tiny-content" sandbox="allow-scripts allow-same-origin"
          data-alloy-tabstop="true" tabindex="-1"
          :srcdoc="content">
  </iframe>
</template>

<script>
export default {
  name: "content",
  data(){
    return {
      content: ''
    }
  },
  methods: {
    setContent(content){
      let headHtml = '<link type="text/css" rel="stylesheet" href="static/tinymce/skins/ui/oxide/content.min.css">' +
        '<link type="text/css" rel="stylesheet" href="static/tinymce/skins/content/default/content.min.css">'+
        '<link type="text/css" rel="stylesheet" href="static/prism/prism.css">'+
        '<script src="static/prism/prism.js"><\/script>';

      this.content = '<!DOCTYPE html>' +
        '<html>' +
        '<head>' +
        headHtml +
        '</head>' +
        '<body class="mce-content-body">' +
        content +
        '</body>' +
        '</html>';

    }
  }
}
</script>

<style scoped lang="scss">
  .tiny-content{
    border: none;
    width: 100%;
  }
</style>